D46_ FE101 + HW1


Posted by Christy on 2021-06-03

鋼彈吊單槓:什麼是盒模型?

  • 運用 box-sizing: border-box; 控制元素的實際寬高

斯斯有三種:display 的三種形式:block、inline 與 inline-block

  • block: 會佔滿一整行
  • inline: span, a
  • inline-block: 結合上述兩者的優點

CSS 基礎 Part4:定位(position)

  • 最好理解的兩種:static 與 relative

    • static: 預設值
    • relative: 相對定位,根據原本位置做偏移
      • position: relative;
      • bottom: -20px;
      • top: 30px;
  • 沒那麼難理解的 absolute 與 fixed

    • 重要的概念!

CSS 隨意聊加上切板實戰(直播影片存檔)

  • box model: 4'10" - 10'08
    // 不是 first-child 就隱藏起來
    .box:not(:first-child) {
    }
  • display 的三種情況:10'20" - 22'10"
  • live 示範切版:22'22" - 47'45"
  • QA時間: ~ 到最後
    • float, flexbox, grid 差別:
    • vertical-align 針對 inline 元素

W6 作業ㄧ

  • 先大致上把所有區塊拉出來,明天開始做 CSS









Related Posts

redis 套件的 Property 'on' does not exist on type 'RedisClientType'

redis 套件的 Property 'on' does not exist on type 'RedisClientType'

JavaScript 的判斷式

JavaScript 的判斷式

上班不如賣雞排?軟體工程師背後的問題

上班不如賣雞排?軟體工程師背後的問題


Comments